<template>  
    <div>  
      <button @click="showLoginDialog = true">登录</button>  
      <div v-if="showLoginDialog" class="dialog">  
        <h2>登录窗口</h2>  
        <input type="text" v-model="loginUsername" placeholder="用户名"><br><br>  
        <input type="password" v-model="loginPassword" placeholder="密码"><br><br>  
        <button @click="login">登录</button>  
        <button @click="showLoginDialog = false">关闭</button>  
      </div>  
    
      <button @click="showRegisterDialog = true">注册</button>  
      <div v-if="showRegisterDialog" class="dialog">  
        <h2>注册窗口</h2>  
        <input type="text" v-model="registerUsername" placeholder="用户名"><br><br>  
        <input type="password" v-model="registerPassword" placeholder="密码"><br><br>  
        <button @click="register">注册</button>  
        <button @click="showRegisterDialog = false">关闭</button>  
      </div>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    data() {  
      return {  
        showLoginDialog: false,
        showRegisterDialog: false,  
        loginUsername: '',  
        loginPassword: '',  
        registerUsername: '',  
        registerPassword: '',  
        users: {} 
      };  
    },  
    methods: {  
      login() {  
        if (this.users[this.loginUsername] === this.loginPassword) {  
          alert('登录成功');  
          this.showLoginDialog = false;  
        } else {  
          alert('用户名或密码错误');  
        }  
      },  
      register() {  
        if (!this.users[this.registerUsername]) {  
          this.users[this.registerUsername] = this.registerPassword;  
          alert('注册成功');  
          this.showRegisterDialog = false;  
        } else {  
          alert('该用户名已存在');  
        }  
      }  
    }  
  };  
  </script>  
    
  <style>  
  .dialog {  
    position: fixed;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    background: #fff;  
    padding: 20px;  
    border: 1px solid #ccc;  
    z-index: 1000; 
  }  
    
  .dialog input,  
  .dialog button {  
    margin-bottom: 10px;  
  }  
  </style>